<template>
	<div class="j-register">
		<j-header :indexNum="1"></j-header>
		<div class="register-box">
			<h3>用户注册</h3>
			<div class="tab-box">
				<ul>
					<li @click="tabChoose(1)" :class="{tactive:1 == num}">手机注册</li>
					<li @click="tabChoose(2)" :class="{tactive:2 == num}">邮箱注册</li>
				</ul>
			</div>
			<div v-if="tActive" class="tab-phone">
				<div class="input-group">
					<input type="text" v-model="phone" placeholder="手机号" name="phone" @blur="_blur()">
					<span>{{ phoneTip }}</span>
				</div>
				<div class="input-group">
					<input type="password" v-model="password" placeholder="密码" nam="password">
					<span>{{ pwTip }}</span>
				</div>
				<!--<div class="input-group input-code">-->
					<!--<input type="text" v-model="code1" placeholder="验证码" class="code1">-->
					<!--<j-identify></j-identify>-->
					<!--<span>{{ codeTip }}</span>-->
				<!--</div>-->
				<div class="input-group input-code">
					<input type="text" v-model="code1" placeholder="手机验证码" name="code1" class="code1">
					<button @click="sendPhoneCode()" class="get-phone" :disabled="isCode">{{codeInfo}}</button>
					<span>{{ codeTip }}</span>
				</div>
				<div>
					<button @click="phoneResiger()" class="btn-register" :disabled="isDis">注册</button>
				</div>
			</div>
			<div v-else class="tab-phone">
				<div class="input-group">
					<input type="text" v-model="email" placeholder="邮箱" name="email" @blur="_blur2()">
					<span>{{ emailTip }}</span>
				</div>
				<div class="input-group">
					<input type="password" v-model="epassword" placeholder="密码" name="password">
					<span>{{ epwTip }}</span>
				</div>
				<!--<div class="input-group input-code">-->
					<!--<input type="text" v-model="code" placeholder="验证码" class="code">-->
					<!--<j-identify></j-identify>-->
					<!--<span>{{ ecodeTip }}</span>-->
				<!--</div>-->
				<div class="input-group input-code">
					<input type="text" v-model="code" placeholder="邮箱验证码" name="code" class="code">
					<button @click="sendMailCode()" class="get-phone" :disabled="isCode">{{codeInfo}}</button>
					<span>{{ ecodeTip }}</span>
				</div>
				<div>
					<button @click="emailResiger()" class="btn-register">注册</button>
				</div>
			</div>
			<div>
				<router-link to="/login" >已有账号? 点击此处登录</router-link>
			</div>
		</div>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../components/Header.vue'
import JFooter from '../components/Footer.vue'
import JIdentify from '../components/IdentifyCode.vue'
import api from '../service/api'
export default {
  components: {
    JHeader, JFooter, JIdentify
  },
  data () {
    return {
      phone: '',
      password: '',
      code1: '',
      email: '',
      epassword: '',
      code: '',
      phoneTip: '',
      pwTip: '',
      codeTip: '',
      emailTip: '',
      epwTip: '',
      ecodeTip: '',
      tActive: true,
      num: 1,
      isDis: false,
      isCode: true,
      wait: '60',
      codeInfo: '获取手机验证码',
      canClick: true
    }
  },
  methods: {
    _blur () {
      const phoneReg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.phone === '' || !phoneReg.test(this.phone)) {
        this.phoneTip = '请输入正确的手机号码'
      } else {
        api.findMemberPhone(this.phone)
          .then(res => {
            if (res.code === 200 && res.msg === 0) {
              console.log(res.msg)
              this.phoneTip = ''
              this.isCode = false
            } else {
              this.phoneTip = '手机号已注册'
              this.isCode = true
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    _blur2 () {
      const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (this.email === '' || !emailReg.test(this.email)) {
        this.emailTip = '请输入正确的邮箱'
      } else {
        api.findMemberEmail(this.email)
          .then(res => {
            if (res.code === 200 && res.msg === 0) {
              console.log(res.msg)
              this.emailTip = ''
              this.isCode = false
            } else {
              this.emailTip = '邮箱已注册'
              this.isCode = true
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    yanzheng (code1, code2) {
      const phoneReg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.phone === '' || !phoneReg.test(this.phone)) {
        this.phoneTip = '请输入正确的手机号码'
        return false
      } else {
        this.phoneTip = ''
      }
      const pwReg = /^(\w){6,20}$/
      if (this.password === '' || !pwReg.test(this.password)) {
        this.pwTip = '请输入正确格式的密码'
        return false
      } else {
        this.pwTip = ''
      }
      if (code1.toLowerCase() !== code2.toLowerCase()) {
        this.codeTip = '验证码不正确'
        return false
      } else {
        this.codeTip = ''
        return true
      }
    },
    yanzheng2 (code1, code2) {
      const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (this.email === '' || !emailReg.test(this.email)) {
        this.emailTip = '请输入正确的邮箱'
        return false
      } else {
        this.emailTip = ''
      }
      const pwReg = /^(\w){6,20}$/
      if (this.epassword === '' || !pwReg.test(this.epassword)) {
        this.epwTip = '请输入正确格式的密码'
        return false
      } else {
        this.epwTip = ''
      }
      if (code1.toLowerCase() !== code2.toLowerCase()) {
        this.ecodeTip = '验证码不正确'
        return false
      } else {
        this.ecodeTip = ''
        return true
      }
    },
    phoneResiger () {
      let that = this
      const body = {
        phone: that.phone,
        password: that.password,
	      code: that.code1
      }
      var fromData = new FormData()
      for (let item in body) {
        fromData.append(item, body[item])
      }
      console.log(body)
      api.register(fromData)
        .then(res => {
          if (res.code === '200') {
            alert('注册成功')
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
      // if (this.yanzheng(this.code1, window.localStorage.getItem('codes'))) { }
    },
    emailResiger () {
      let that = this
      const body = {
        email: that.email,
        password: that.epassword,
        code: that.code
      }
      console.log(body)
      var fromData = new FormData()
      for (let item in body) {
        fromData.append(item, body[item])
      }
      // if (this.yanzheng2(this.code, window.localStorage.getItem('codes'))) {}
      api.register(fromData)
        .then(res => {
          if (res.code === '200') {
            alert('注册成功')
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabChoose (index) {
      if (index === 1) {
        this.codeInfo = '获取手机验证码'
        this.tActive = true
        this.num = 1
        console.log('aaaaaaaaaa')
      } else if (index === 2) {
        this.codeInfo = '获取邮箱验证码'
        this.tActive = false
        this.num = 2
	      console.log('sssssssss')
      }
    },
    sendPhoneCode () {
      api.sendPhoneCode(this.phone)
        .then(res => {
          if (res.code === 200) {
            this._times(1)
            console.log(res.msg)
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sendMailCode () {
      api.sendMailCode(this.email)
        .then(res => {
	        if (res.code === 200) {
	        this._times(2)
	          console.log(res.msg)
	        } else {
	          console.log(res.msg)
	        }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _times (index) {
      if (!this.canClick) return
      this.canClick = false
      // 这里解决60秒不见了的问题
      this.codeInfo = this.wait + '秒'
      let clock = window.setInterval(() => {
        this.wait--
        this.codeInfo = this.wait + '秒'
	      this.isCode = true
        // 当倒计时小于0时清除定时器
        if (this.wait < 0) {
          window.clearInterval(clock)
	        if (index === 1) {
            this.codeInfo = '获取手机验证码'
	        } else {
            this.codeInfo = '获取邮箱验证码'
	        }
          this.wait = 60
          this.canClick = true
          this.isCode = false
        }
      }, 1000)
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-register{
		text-align: center;
		.register-box{
			/*border: 1px solid red;*/
			margin: 70px auto;
			h3{
				margin-bottom: 30px;
			}
			div{
				width: 300px;
				margin-bottom: 20px;
				input{
					width: 300px;
					height: 35px;
					padding-left: 10px;
					border-radius: 5px 5px;
					box-shadow: none;
					border: 1px solid #ccc;
				}
				input:focus{
					outline:none;
					border:#87C6F9 1px solid;
					box-shadow: 0 0 8px rgba(103, 166, 217, 1);
				}
				.btn-register{
					width: 100%;
					height: 35px;
					border: none;
					background: #87C6F9;
					color: #fff;
					border-radius: 5px 5px;
				}
			}
			.input-code{
				overflow: hidden;
				.code{
					float: left;
					width: 150px;
				}
				.code1{
					float: left;
					width: 150px;
				}
				.code-span{
					float: right;
					display: inline-block;
					width: 120px;
					height: 35px;
					padding-left: 10px;
					border: 1px solid red;
				}
				.get-phone{
					float: right;
					width: 130px;
					height:35px;
					background: green;
					color: white;
					border: none;
					box-shadow: none;
					border-radius: 5px 5px;
				}
			}
			.tab-box{
				/*border: 1px solid red;*/
				position: relative;
				height: 40px;
				border-bottom: 1px solid #ddd;
				ul{
					position: absolute;
					top: 0;;
					width: 100%;
					margin: 0;
					display: table;
					z-index: 999;
					li{
						width: 50%;
						height: 40px;
						line-height: 40px;
					}
					.tactive{
						border: 1px solid #ddd;
						border-bottom: none;
						background: #fff;
					}
					:hover{
						background: #ddd;
					}
				}
			}
			span{
				display: inline-block;
				width: 300px;
				text-align: left;
				color:red;
			}
		}
	}
</style>